<template>
  <div class="box">
    <div class="tabs">
      <div
        class="tab-item"
        v-for="item in tabs"
        :key="item.prop"
        :class="{ active: item.prop === active }"
        @click="handleChange(item)"
      >
        {{ item.name }}
      </div>
    </div>
    <div class="chart" ref="chart"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  data() {
    return {
      tabs: [
        {
          name: "GPS",
          prop: "GPS",
        },
        {
          name: "AIS",
          prop: "AIS",
        },
        {
          name: "ARPA",
          prop: "ARPA",
        },
        {
          name: "GYRO",
          prop: "GYRO",
        },
        {
          name: "ECHO",
          prop: "ECHO",
        },
      ],
      active: "GPS",
    };
  },
  methods: {
    handleChange(row) {
      this.active = row.prop;
    },
    initChart(data) {
      let xAxis = [];
      let yAxis = [];
      for (let item of data) {
        xAxis.push(item.name);
        yAxis.push(item.value);
      }
      let myChart = echarts.init(this.$refs.chart);
      myChart.setOption({
        grid: {
          left: "0%",
          right: "0%",
          top: "20px",
          bottom: "20px",
        },
        xAxis: {
          type: "category",
          data: xAxis,
          axisLine: {
            lineStyle: {
              color: "white", // 将 x 轴线的颜色设置为白色
            },
          },
        },
        yAxis: {
          type: "value",
          show: false,
        },
        series: [
          {
            data: yAxis,
            type: "line",
            label: {
              show: true, // 显示标签
              position: "top", // 设置标签位置为柱状图的顶部
            },
            lineStyle: {
              color: "#97C2F8", // 设置折线的颜色为白色
            },
            itemStyle: {
              color: "white", // 设置数据点的颜色为白色
            },
            areaStyle: {
              color: {
                type: "linear",
                x: 0, // 起始颜色位置
                y: 0, // 起始颜色位置
                x2: 0, // 终止颜色位置
                y2: 1, // 终止颜色位置
                colorStops: [
                  {
                    offset: 0,
                    color: "#1C588E", // 起始颜色
                  },
                  {
                    offset: 1,
                    color: "#0A2364", // 终止颜色
                  },
                ],
              },
            },
          },
        ],
      });
    },
  },
  mounted() {
    const data = [
      {
        value: "900",
        name: "09-23",
      },
      {
        value: "152",
        name: "09-24",
      },
      {
        value: "506",
        name: "09-25",
      },
      {
        value: "650",
        name: "09-26",
      },
      {
        value: "450",
        name: "09-27",
      },
      {
        value: "751",
        name: "09-28",
      },
      {
        value: "485",
        name: "09-29",
      },
    ];
    this.initChart(data);
  },
};
</script>

<style scoped lang="scss">
.box {
  background-image: url("/img/screen/card.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  padding: 15px;
  .tabs {
    display: flex;
    .tab-item {
      font-size: 16px;
      color: #fff;
      margin-right: 8px;
      padding: 5px 5px;
      cursor: pointer;
      font-size: 14px;
      border-radius: 5px;
    }
    .active {
      background: linear-gradient(rgb(170, 188, 227) 0%, rgb(24, 88, 227) 100%);
    }
  }
  .chart {
    width: 100%;
    margin-top: 15px;
    height: calc(100% - 15px - 30px);
  }
}
</style>
